﻿@{
    ViewBag.Title = "User List";
    Layout = "~/Views/Shared/_PageListLayout.cshtml";
}

<td data-bind="text: UserName"></td>
<td data-bind="text: Role"></td>
<td data-bind="text: Email"></td>
<td data-bind="text: Department"></td>
<td data-bind="text: Phone"></td>
<td data-bind="text: Mobile"></td>
<td data-bind="text: CreateDate"></td>


@section Script
 {
    <script type="text/javascript">
        var options = {
            title: "User List",
            searchCriteria: [
                { displayText: "UserName", value: ko.observable() }
            ],
            headers: [
                { displayText: "User Name", value: "UserName", width: "auto", canOrder: "true" },
                { displayText: "Role", value: "Role", width: "auto", canOrder: "true" },
                { displayText: "Email", value: "Email", width: "auto", canOrder: "true" },
                { displayText: "Department", value: "Department", width: "auto", canOrder: "true" },
                { displayText: "Phone", value: "Phone", width: "auto", canOrder: "true" },
                { displayText: "Mobile", value: "Mobile", width: "auto", canOrder: "true" },
                { displayText: "Create Date", value: "CreateDate", width: "auto", canOrder: "true" },
                { displayText: "Operation", value: "", width: "auto", canOrder: "false" }
            ],
            needShowPwdLink: true,
            defaultOrderBy: "CreateDate",

            dataQueryUrlAccessor: function (viewModel) {
                return appendQueryString('@Url.Action("GetUsers")', {
                     name: viewModel.searchCriteria()[0].value(),
                     pageIndex: viewModel.pageIndex(),
                     orderBy: viewModel.orderBy(),
                     isAsc: viewModel.isAsc()
                 });
             },

             dataAddUrlAccessor: function () { return '@Url.Action("Add")'; },
             dataUpdateAccessor: function (data) { return appendQueryString('@Url.Action("Update")', { id: data.Id }); },
            dataDeleteAccessor: function (data) { return appendQueryString('@Url.Action("Delete")', { id: data.Id }); },
            dataResetPwdAccessor: function (data) { return appendQueryString('@Url.Action("ResetPassword")', { id: data.Id }); },

             replaceData: function (data, viewModel) {
                 for (var i = 0; i < viewModel.recordSet().length; i++) {
                     var existing = viewModel.recordSet()[i];
                     if (existing.Id == data.Id) {
                         viewModel.recordSet.replace(existing, data);
                         break;
                     }
                 }
             },

             removeData: function (data, viewModel) {
                 viewModel.recordSet.remove(function (c) {
                     return c.Id == data.Id;
                 });
             }
         };

         var viewModel = new ViewModel(options);
         ko.applyBindings(viewModel);

         function appendQueryString(url, parameters) {
             url += "?"
             for (var key in parameters) {
                 if (parameters[key] === null || parameters[key] === undefined || parameters[key] === "") {
                     continue;
                 }
                 url += key + "=" + encodeURIComponent(parameters[key]) + "&";
             }
             return url;
         }
    </script>
}
